<template>
  <div>
    <crumb isShowBack/>
    <div class="main-contianer3 caseManage">
      <div class="top-content">
        <div class="main">
          <div class="main-left">
            <div class="case-tip">案例标题: {{cases.casetitle}}</div>
            <div class="case-con online-diglogBox">
              <div>时间：{{cases.createTime}} 耗时：{{cases.duration}}</div>
              <el-button type="text" @click="handleReport">
                您已完成{{cases.stuFinishedNum}}次训练
                <i class="el-icon-arrow-right"></i>
              </el-button>
            </div>
            <div class="case-tip">案例要求</div>
            <div class="case-con">
              <span>{{cases.caserequest || ''}}</span>
            </div>
            <div class="case-tip" style="border-top: 1px solid #ccc;">案例背景</div>
            <el-carousel trigger="click" height="500px" :loop="false">
              <el-carousel-item v-for="(item, index) in cases.resourceCaseBgList" :key="index">
                <!-- 纯文本 -->
                <div class="media-box" v-if="item.displayType === '1'">
                  <div class="case-con">{{item.resourceCaseContentEn}}</div>
                </div>
                <!-- 图片 -->
                <div class="media-box" v-if="item.displayType === '2'">
                  <img :src="item.fileUrl" style="max-width:100%;max-height:100%;display: block;margin: 0 auto;">
                </div>
                <!-- 音频 -->
                <div class="media-box" v-if="item.displayType === '3'">
                  <audio class="audio" controls :src="item.fileUrl"></audio>
                </div>
                <!-- 视频 -->
                <div class="media-box" v-if="item.displayType === '4'">
                  <video class="video" controls :src="item.fileUrl">
                    <track :src="item.fileUrl" lang="en" label="English" kind="subtitles" default />
                  </video>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="main-right">
            <div class="comment-state">作答区域</div>
            <el-input type="textarea" class="online-note" placeholder="请输入作答内容" v-model="result"></el-input>
            <div style="display: flex;justify-content: flex-end;padding: 0 20px;">
              <el-button type="primary" :disbled="btnDisabled" icon="el-icon-upload">上传报告</el-button>
              <el-button type="primary" :disbled="btnDisabled" @click="caseAnalyseSubmit">提交</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { caseAnalyseMain, caseAnalyseStart, updateDuration, caseAnalyseSubmit } from '@/api/student/training/caseAnalyse'
export default {
  name: 'caseAnalyseView',
  data () {
    return {
      id: this.$route.query.id,
      btnDisabled: false,
      cases: {
        caseBatchId: '',
        flagCode: '',
        resourceCaseBgList: [],
        result: '',
        returnMessage: '',
        // batchNum: '',
        caserequest: '',
        casetitle: '',
        // classFinishedNum: '',
        createdTime: '',
        duration: '',
        // finishedList: [],
        // isScored: '',
        // lastRecordFinishedFlag: '',
        // lastRecordFlag: '',
        // lastRecordId: '',
        // rank: '',
        // resourceCaseId: '',
        // score: '',
        stuFinishedNum: ''
      },
      result: ''
    }
  },
  mounted () {
    this.caseAnalyseMain()
    this.caseAnalyseStart()
    this.timer = setInterval(() => {
      this.updateDuration()
    }, 8000)
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    async caseAnalyseMain () {
      const res = await caseAnalyseMain({
        resourceCaseId: this.id,
        lastRecordId: this.cases.lastRecordId || ''
      })
      if (res.code === '200') {
        console.log(res.data)
        this.cases.casetitle = res.data.casetitle
        this.cases.caserequest = res.data.caserequest
        this.cases.createTime = res.data.createTime
        this.cases.duration = this.returnDate(res.data.duration)
        this.cases.stuFinishedNum = res.data.stuFinishedNum
      } else {
        this.$message.error(res.message)
      }
    },
    async caseAnalyseStart () {
      const res = await caseAnalyseStart({
        resourceCaseId: this.id,
        lastRecordId: this.cases.lastRecordId || ''
      })
      if (res.code === '200') {
        // this.cases = res.data
        this.cases.caseBatchId = res.data.caseBatchId
        this.cases.flagCode = res.data.flagCode
        this.cases.resourceCaseBgList = res.data.resourceCaseBgList
        this.cases.result = res.data.result
        this.cases.returnMessage = res.data.returnMessage
        if (this.cases.result) {
          this.result = JSON.parse(this.cases.result)[0].result || ''
        }
      } else {
        this.$message.error(res.message)
      }
    },
    async updateDuration () {
      const res = await updateDuration({
        caseAnalyseBatchId: this.cases.caseBatchId
      })
      if (res.code !== '200') {
        this.$message.error(res.message)
      }
    },
    async caseAnalyseSubmit () {
      if (!this.result) {
        this.$message.error('请输入作答内容')
        return
      }
      const res = await caseAnalyseSubmit({
        caseBatchId: this.cases.caseBatchId,
        resultJson: JSON.stringify([{
          result: this.result,
          fileUrl: ''
        }])
      })
      if (res.code === '200') {
        this.$message.success('操作成功')
        this.$router.go(-1)
      } else {
        this.$message.error(res.message)
      }
    },
    handleReport () {
      this.$router.push({
        name: 'caseAnalyseReport',
        query: {
          id: this.id
        }
      })
    },
    returnDate (time) {
      if (time < 60) {
        return time < 10 ? '00:0' + time : '00:' + time
      } else if (time < 3600) {
        return Math.floor(time / 60) < 10 ? '0' + Math.floor(time / 60) + ':' + (time % 60 < 10 ? '0' + time % 60 : time % 60) : Math.floor(time / 60) + ':' + (time % 60 < 10 ? '0' + time % 60 : time % 60)
      } else {
        return '大于一小时'
      }
    }
  },
  components: {
  }
}
</script>
<style scoped lang="scss" rel="stylesheet/scss">
.caseManage {
  .top-content {
    width: 100%;
    background: #fff;
    .main {
      width: 1200px;
      margin: 0 auto;
      .main-left {
        width: 760px;
        height: 700px;
        float: left;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(229, 229, 229, 1);
        box-sizing: border-box;
        padding: 10px;
        border-radius: 5px;
        overflow: auto;
      }
      .main-right {
        width: calc(100% - 760px - 10px);
        height: 700px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(229, 229, 229, 1);
        border-radius: 5px;
        float: right;
        padding: 0 0 10px;
        position: relative;
        overflow-y: scroll;
      }
    }
  }
}
</style>
